<template>
	<div class="root-div">
		
		<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+listCurID" :style="'height:calc(100vh - '+CustomBar+'px - 20px)'" scroll-with-animation="true" enable-back-to-top="true">
		  <view class="cu-bar bg-white search fixed">
		    <view class="search-form round">
					<text class="icon-search"></text>
					<input type="text" placeholder="请选择" :custom-style="InputCssObj" v-model="selectUsersShow"></input>
		    </view>

		    <view class="action">
					<u-button type="primary" size="mini" shape="square" @click="showModal = true">确定</u-button>
		    </view>
		  </view>

			<div style="padding-top: 110rpx;" v-if="list.length>0">
				<checkbox-group @change="checkboxChange">
					<block v-for="(item, index) in list" class="u-border-bottom">
						<!-- <view :class="'padding indexItem-'+list[index]">{{index}}</view> -->
							<view class="cu-list menu-avatar no-padding">
								<checkbox :value="item.WF_OrUnid" :checked="item.checked">
									<view class="cu-item u-pl-10">
										<image :src='item.avatarUrl' class='cu-avatar round lg'></image>
										<view class="content u-pl-10">
											<view class="text-grey">
												<text class="text-abc">{{item.PartnerName}}</text>
											</view>
											<view class="text-gray text-sm">
												{{item.Partnerid}}
											</view>
										</view>
									</view>
								</checkbox>
							</view>
						<!-- </view> -->
					</block>
				</checkbox-group>
			</div>
			<div v-else>
				<div class="u-pb-50" style="margin: 0 auto;padding-top: 300rpx;">
					<u-empty text="暂无可回收应聘机会的用户" mode="data"></u-empty>
				</div>
			</div>
			
			<!-- 提示 -->
			<u-modal 
			  ref="uModal"
			  title="平台提示"
			  v-model="showModal"
			  show-cancel-button
			  confirm-text="确认"
			  cancel-text="取消"
			  @confirm="ConfirmSelect"
			>
			  <div class="u-p-20 u-text-center">
			      <p>是否确认提交？</p>
			  </div>
			</u-modal>

		</scroll-view>

	</div>
</template>

<script>
	export default {
	  data() {
	    return {
				StatusBar: '',
				CustomBar: '',
				hidden: true,
				list: [],
				listCur: {},
				boxTop: 0,
				barTop: 0,
				movableY: 0,
				listCurID: '',
				indexs: [],
				selectUsers: [],
				selectUsersShow: [],
				InputCssObj: {
					"padding-left": "40rpx"
				},
				docUnid: '',
				showModal: false
			};
	  },
	
	  onLoad(options) {
			if(this.isNotNull(options.docUnid)){
				this.docUnid = options.docUnid
				this.initUsersData()
			}else{
				this.showMSG('error','数据有误')
				setTimeout(() => {
					this.goBack()
				}, 1500)
			}
	  },
	
	  mounted() {
			// 获取系统状态栏信息
			wx.getSystemInfo({
				success: e => {
				this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				// this.Custom = custom;
				this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				}
			})
	  },
	
	  onReady() {

	  },
	
	  methods: {
		  
		  /**
		  * 初始化用户数据
		  */
		  async initUsersData(){
				const userInfo = uni.getStorageSync('userInfo')
				let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'Recruit3',
					wf_num: 'R_Recruit3_BL012',
					docUnid: this.docUnid,
					searchStr: this.keyword,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if(result.code = 200){
					this.list = result.data
				}
		  },
		  
		  indexSelect(e) {
			let that = this;
			let barHeight = this.barHeight;
			let list = this.list;
			let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
			for (let i = 0; i < list.length; i++) {
			  if (scrollY < i + 1) {
				  this.listCur = list[i]
				  this.movableY = i * 20
				return false
			  }
			}
		  },
		  
		  /**
		   * 选中复选框
		   */
		  checkboxChange(e) {
			this.selectUsers = e.detail.value
			this.resetArrByUserids()
		  },
		  
		  /**
		   * 选中人员回收用户推广机会
		   */
		  async ConfirmSelect(){
			  if(this.selectUsers.length == 0){
			  	  this.showMSG("none","请先选择需要回收的用户")
				  return
			  }
			  let docUnids = ''
			  for(let i in this.selectUsers){
				  if(docUnids !== ''){
					  docUnids += "," + this.selectUsers[i]
				  }else{
					  docUnids = this.selectUsers[i]
				  }
			  }
			  const userInfo = uni.getStorageSync('userInfo')
			  let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'Recruit3',
					wf_num: 'R_Recruit3_BL013',
					docUnid: docUnids,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
			  });
			  this.showMSG("none",result.msg)
			  setTimeout(() => {
				this.goBack()
			  }, 1500)
		  },
		  
		  /**
		   * 根据用户id串（selectUsers）将用户名放到显示的数组中（selectUsersShow）
		   */
		  resetArrByUserids(){
			  this.selectUsersShow = []
			  for(let index in this.list){
			  		if(this.selectUsers.indexOf(this.list[index].WF_OrUnid)>-1){
			  			this.selectUsersShow.push(this.list[index].PartnerName)
			  		}
			  }
		  },
		  
	}
}
</script>

<style scoped>
	.root-div {
		background-color: #efecec;
		font-size: 28rpx;
		color: #333;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		--red: #e54d42;
		--orange: #f37b1d;
		--yellow: #fbbd08;
		--olive: #8dc63f;
		--green: #39b54a;
		--cyan: #1cbbb4;
		--blue: #0081ff;
		--purple: #6739b6;
		--mauve: #9c26b0;
		--pink: #e03997;
		--brown: #a5673f;
		--grey: #8799a3;
		--gray: #aaa;
		--black: #333;
		--white: #fff;
		--gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
		--gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
		--gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
		--gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
		--gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
		--gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);
	}
	
	.indexes {
		position: relative;
	}
	
	scroll-view {
		display: block;
		width: 100%;
	}
	
	* {
		margin: 0;
	}
	
	.padding {
		padding: 30rpx;
	}
	
	view, scroll-view, swiper, button, input, textarea, label, navigator, image {
		box-sizing: border-box;
	}
	
	view {
		display: block;
	}
	
	.cu-list.menu-avatar {
		overflow: hidden;
	}
	
	.cu-list>.cu-item {
		transition: all 0.6s ease-in-out 0s;
		transform: translateX(0rpx);
	}
	
	.cu-list.menu-avatar>.cu-item {
		position: relative;
		display: flex;
		padding-right: 30rpx;
		height: 140rpx;
		background-color: #fff;
		justify-content: flex-end;
		align-items: center;
	}
	
	.round {
		border-radius: 5000rpx;
	}
	.cu-avatar {
		font-variant: small-caps;
		margin: 0;
		padding: 0;
		display: inline-flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		background-color: #ccc;
		color: #fff;
		white-space: nowrap;
		position: relative;
		width: 64rpx;
		height: 64rpx;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		font-size: 1.5em;
	}
	
	.cu-avatar.lg {
		width: 96rpx;
		height: 96rpx;
		font-size: 2em;
	}
	.cu-list.menu-avatar>.cu-item>.cu-avatar {
		position: absolute;
		left: 30rpx;
	}
	
	.cu-list.menu-avatar>.cu-item .content {
		position: absolute;
		left: 146rpx;
		width: calc(100% - 96rpx - 60rpx - 120rpx - 20rpx);
		line-height: 1.6em;
	}
	
	.cu-list.menu-avatar>.cu-item .content>view:first-child {
		font-size: 30rpx;
		display: flex;
		align-items: center;
	}
	.text-grey, .line-grey, .lines-grey {
		color: var(--grey);
	}
	
	.text-sm {
		font-size: 24rpx;
	}
	.text-gray, .line-gray, .lines-gray {
		color: var(--grey);
	}
	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20rpx 20rpx 20rpx 60rpx;
		display: flex;
		align-items: center;
	}
	
	.indexBar .indexBar-box {
		width: 40rpx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
	}
	
	.indexBar-item {
		flex: 1;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #888;
	}
	
	.cu-bar {
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100rpx;
		justify-content: space-between;
	}
	.cu-bar.fixed, .nav.fixed {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	}
	.bg-white {
		background-color: #fff;
		color: #666;
	}
	.round {
		border-radius: 5000rpx;
	}
	.cu-bar .search-form {
		background-color: #f5f5f5;
		line-height: 64rpx;
		height: 64rpx;
		font-size: 24rpx;
		color: #666;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 20rpx;
	}
	.cu-bar .action {
		display: flex;
		align-items: center;
		height: 100%;
		justify-content: center;
		max-width: 100%;
	}
	.cu-bar .action:last-child {
		margin-right: 30rpx;
	}
	.cu-bar .search-form+.action {
		margin-right: 20rpx;
	}
	
	.shadow-blur {
		position: relative;
	}
	.cu-btn {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 30rpx;
		font-size: 28rpx;
		height: 64rpx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0rpx, 0rpx);
		margin-right: initial;
	}
	.bg-gradual-green {
		background-image: var(--gradualGreen);
		color: #fff;
	}
	/* button {
		-webkit-tap-highlight-color: transparent;
		background-color: #f8f8f8;
		border-radius: 5px;
		box-sizing: border-box;
		color: #000;
		cursor: pointer;
		display: block;
		font-size: 18px;
		line-height: 2.55555556;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
		padding-left: 14px;
		padding-right: 14px;
		position: relative;
		text-align: center;
		text-decoration: none;
	} */
	
	.indexItem-A {
		padding-top: 130rpx;
	}
	
	.cu-item {
		position: relative;
		display: flex;
		padding-right: 30rpx;
		height: 140rpx;
		background-color: #fff;
		justify-content: flex-end;
		align-items: center;
		transition: all 0.6s ease-in-out 0s;
		transform: translateX(0rpx);
	}
	
	.cu-list {
		background-color: white;
		padding-left: 20rpx;
	}
	
</style>
